<template>
	<view class="uiwu">
		<scroll-view class="scroll-view" scroll-y @scrolltolower="scrolltolower">
			<view class="item uiwu-flex-space" v-for="(item,index) in listData" :key="index">
				<image v-if="index == 0" src="/static/no1.png" mode="widthFix"></image>
				<image v-if="index == 1" src="/static/no2.png" mode="widthFix"></image>
				<image v-if="index == 2" src="/static/no3.png" mode="widthFix"></image>
				<view class="nonum uiwu-flex-center" v-if="index > 2">{{index + 1}}</view>
				<view class="user uiwu-flex-align">
					<image :src="item.avatar" mode="aspectFill"></image>
					<text>{{item.nickname}}</text>
				</view>
				<view class="right">
					抓中<text>{{item.grab_count}}</text>次
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { userRanking } from '@/api/api';
	import { uiwu } from '@/config/config';
	const listData = ref<Array<object>>([])
	const pageNum = ref<number>(1)
	const more = ref<string>('loading');
	const isLock = ref<boolean>(true)
	const getuserRanking = async (mack:boolean=false) : Promise<any> => {
		if(!mack) pageNum.value = 1
		const { data:{data , total}} = await userRanking({
			page:pageNum.value
		});
		isLock.value = true
		uiwu.setlist({
			isMore:mack,
			listData,
			total,
			listRow:data,
			more,
			pageNum
		})
	}
	/**
	 * 加载更多
	 */
	const scrolltolower = () => {
		if(!isLock.value) return
		isLock.value = false
		pageNum.value++
		userRanking(true)
	}
	onLoad(()=>{
		getuserRanking()
	})
</script>

<style lang="scss">
	.uiwu{
		width: 100%;
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		padding-top: 365rpx;
		background: url('../../static/rankingbg.png') no-repeat 0 0;
		background-size: 100% 100%;
	}
	.scroll-view{
		padding: 0 55rpx;
		box-sizing: border-box;
		height: calc(100vh - 495rpx);
		/* #ifdef H5 */
		height: calc(100vh - 550rpx);
		/* #endif */
	}
	.item{
		width: 100%;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 100rpx;
		border: 4rpx solid #231815;
		margin-top: 16rpx;
		padding: 0 30rpx;
		image{
			width: 56rpx;
		}
		.nonum{
			width: 56rpx;
			height: 56rpx;
			font-size:40rpx;
			font-weight: bold;
			color: #7b7b7b;
		}
		.user{
			flex: 1;
			padding-left: 24rpx;
			image{
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}
			text{
				font-size: 28rpx;
				font-weight: bold;
				color: #231815;
				margin-left: 16rpx;
			}
		}
		.right{
			font-size: 28rpx;
			font-weight: bold;
			color: #231815;
			text{
				color: #EF821E;
			}
		}
	}
</style>
